<template>
    <!--要显示主体内容-->
    <div class="main">
        <div class="login">
            <div class="logo">
                <img src="../assets/my_logo.png" alt="">
            </div>
            <el-form :model="user" class="user_form" :rules="userRules" ref="userFormRef">

                <el-form-item prop="name">
                    <el-input v-model="user.name" placeholder="邮箱" :prefix-icon="User" />
                </el-form-item>
                <el-form-item prop="pwd">
                    <el-input v-model="user.pwd" placeholder="密码" :prefix-icon="Lock" show-password />
                </el-form-item>
                <el-form-item prop="nickname">
                    <el-input v-model="user.nickname" placeholder="昵称" />
                </el-form-item>
                <p>年龄：</p><el-input-number v-model="user.age" :min="18" :max="30" @change="handleChange" /><br>
                <el-radio-group v-model="user.sex" style="margin-top: 15px;">
                    <el-radio :value="1">男</el-radio>
                    <el-radio :value="2">女</el-radio>
                </el-radio-group><br>
                <el-select v-model="user.college" placeholder="学院" size="large" style="width: 240px; margin-top: 15px;">
                    <el-option v-for="item in college_options" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select><br>
                <el-form-item prop="verification">
                    <el-input v-model="user.verification" placeholder="验证码" style="width: 200px; margin-top: 20px;" />
                    <img :src="imageUrl" @click="imgSrc" alt="验证码图片"
                        style="width: 100px; height: 30px; margin-left: 40px; margin-top: 20px" />
                    <p style=" margin-left: 5px; margin-top: 30px">看不清？点击图片更换验证码</p>
                </el-form-item><br>
                <el-form-item prop="email_code">
                    <el-input v-model="user.email_code" placeholder="邮箱验证码" style="width: 150px;" />
                    <el-button type="primary" style="margin-left: 20px;"
                        @click="sendEmail(userFormRef)">获取验证码</el-button>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="GoLogin()">已有账号，返回登录</el-button>
                    <el-button type="primary" @click="registration(userFormRef)">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>


<script setup>
import { reactive, ref } from 'vue'
import { Lock, User } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted } from 'vue';
// import api from '@/api/index.js'    // 导入api接口
import api from '@/api/index.js'
import "element-plus/theme-chalk/el-message-box.css";



onMounted(() => {
    imgSrc()
})

// 定义数字
const num = ref(18)

// 验证码图片
const imageUrl = ref('')


const college_options = [{
    value: '1',
    label: '经济与管理学院',
}, {
    value: '2',
    label: '文化与法律学院',
}, {
    value: '3',
    label: '艺术与传媒学院',
}, {
    value: '4',
    label: '教育学院',
}, {
    value: '5',
    label: '外国语学院',
}, {
    value: '6',
    label: '马克思主义学院',
}, {
    value: '7',
    label: '体育学院',
}, {
    value: '8',
    label: '大数据与人工智能学院',
}, {
    value: '9',
    label: '电子与机械工程学院',
}, {
    value: '10',
    label: '材料与包装工程学院',
}, {
    value: '11',
    label: '食品与生物工程学院',
}, {
    value: '12',
    label: '海洋学院',
}, {
    value: '13',
    label: '继续教育学院',
}]

// 定义表单数据
const user = reactive({
    name: '',
    pwd: '',
    nickname: '',
    age: 18,
    sex: '',
    college: '',
    verification: '',
    email_code: ''

})
// 定义表单规则
const userRules = reactive({
    name: [
        { required: true, message: '邮箱不能为空', trigger: 'blur' },
        { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱地址', trigger: "blur" }
    ],
    pwd: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
    ],
    verification: [
        { required: true, message: '验证码不能为空', trigger: 'blur' },
        { min: 4, max: 4, message: '长度为4', trigger: 'blur' }
    ]
})

// 生成验证码图片
const imgSrc = () => {
    api.get_capt().then((res) => {
        console.log(res)
        const blob = new Blob([res.data]);
        let url = window.URL.createObjectURL(blob); //根据返回的流文件创建url；url指向流
        imageUrl.value = url; // 创建一个指向 blob 对象的 URL
        console.log(imageUrl.value)
    })
}

const userFormRef = ref(null) // 定义表单ref

const router = useRouter() // 创建路由实例

// 定义跳转登录页面功能
const GoLogin = () => {
    router.push('/login')
}
// 定义注册功能
const registration = (formRef) => {
    formRef.validate((valid) => {
        if (valid) {
            if (user.email_code.length != 0) {
                api.registration(user).then((res) => {
                if (res.status == 200) {
                    if (res.data.data == "true") {
                        ElMessageBox.alert(
                            '注册成功，去登陆',
                            '提示',
                            {
                                confirmButtonText: '确定',
                                type: 'success',
                                showClose: false,
                                closeOnClickModal: false,
                                closeOnPressEscape: false,
                            }
                        ).then(() => {
                            router.push('/login')
                        })
                    }
                    else {
                        ElMessage({
                            message: res.data.msg,
                            type: 'error'
                        })
                    }
                }
            })
            }
            else{
                ElMessage({
                            message: "请输入邮箱验证码",
                            type: 'error'
                        })
            }
        } else {
            return false
        }
    })
}

// 定义获取邮箱验证码发送api
const sendEmail = (formRef) => {
    formRef.validate((valid) => {
        if (valid) {
            api.send_email(user.name).then((res) => {
                console.log(res)
                ElMessage({
                            message: res.data.msg,
                            type: 'success'
                        })
            })
        }
    })


}


</script>


<style scoped>
.main {
    width: 100%;
    height: 100%;
    background-color: rgb(233, 188, 8);
    display: flex;
    justify-content: center;
    align-items: center;
}


.login {
    width: 700px;
    height: 700px;
    background-color: white;
    border-radius: 5px;
}


.logo {
    width: 200px;
    border: 1px solid #eee;
    margin: 0 auto;
    margin-top: -85px;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 0 10px #ddd;
}


img {
    width: 100%;
    height: 100%;
}


.user_form {
    padding: 50px;
}


.btns {
    display: flex;
    justify-content: space-between;
}


.btns button {
    flex: 1;
}
</style>